<template>
  <div v-if="visible" class="intro-overlay">
    <div class="intro-card">
      <div class="intro-title">知识问答闯关</div>
      <div class="intro-desc">
        <p>这是一个基于聊天的闯关问答游戏：</p>
        <p>• 每题由助手推送题干与选项，提交后立即判定对错并给解析</p>
        <p>• 积分与连胜自动累计，并展示成就</p>
        <p>• 全程采用 DevUI 风格，体验统一且高效</p>
      </div>
      <div class="intro-actions">
        <d-button size="lg" variant="solid" @click="onStart">开始闯关</d-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useChallengeStore } from '@/store';

const challenge = useChallengeStore();
const visible = ref(false);

onMounted(() => {
  const already = localStorage.getItem('mc-intro-shown');
  visible.value = !already && !challenge.active;
});

const onStart = () => {
  challenge.start();
  localStorage.setItem('mc-intro-shown', '1');
  visible.value = false;
};
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.intro-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
}

.intro-card {
  width: 560px;
  max-width: 90vw;
  border-radius: 12px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(94,124,224,0.12), $devui-base-bg 60%);
  box-shadow: 0px 8px 24px rgba(25,25,25,0.18);
}

.intro-title { font-size: 20px; font-weight: 700; color: $devui-text; margin-bottom: 8px; }
.intro-desc { color: $devui-text; line-height: 1.6; margin-bottom: 12px; }
.intro-actions { display: flex; justify-content: flex-end; }
</style>